<template>
	<div class="stag">
		<!-- Stag -->
		<div class="staging">
			<!-- <span>工作台</span> -->
		</div>
		<!-- 卡片模块 -->
		<div class="Card">
			<li v-for="(v,i) in Card" :key="i">
				<p class="stagCard">
					<i :class="v.icon" style="font-size: 20px;"></i>
					<span style="font-size: 12px;font-weight: bold;margin-left: 4px;">{{ v.title }}</span>
				</p>
				<p class="stagCard" style="display: flex;justify-content: space-between">
					<span>{{ v.t1 }}</span>
					<span style="font-size: 18px;font-weight: bold;">{{ v.solve }}</span>
				</p>
				<p class="stagCard" style="display: flex;justify-content: space-between">
					<span>{{ v.t2 }}</span>
					<span style="font-size: 12px;font-weight: bold;">{{ v.all }}</span>
				</p>
			</li>
		</div>
		<!-- submit -->
		<div class="check">
			<el-checkbox v-model="checked1" label="待处理的" size="20"></el-checkbox>
			<el-checkbox v-model="checked2" label="全部"></el-checkbox>
			<!-- inputSearch -->
			  <el-input
			    size="mini"
			    placeholder="请输入内容"
			    prefix-icon="el-icon-search"
			    v-model="input4"
				style="width: 300px;padding: 8px;"
			  >
			  </el-input>
			  <!-- shai xuan -->
			  <el-dropdown trigger="click">
			        <span class="el-dropdown-link">
					  <i class="el-icon-sort"></i>
			          <span style="font-size: 12px;margin-left: 4px;">筛选</span>
			        </span>
			        <template #dropdown>
			          <el-dropdown-menu>
			            <el-dropdown-item icon="el-icon-circle-plus">筛选内容1</el-dropdown-item>
			            <el-dropdown-item icon="el-icon-circle-plus-outline"
			              >筛选内容2</el-dropdown-item
			            >
			            <el-dropdown-item icon="el-icon-check">筛选内容3</el-dropdown-item>
			            <el-dropdown-item icon="el-icon-circle-check"
			              >筛选内容4</el-dropdown-item
			            >
			          </el-dropdown-menu>
			        </template>
			</el-dropdown>
			<!-- add something -->
			  <el-select v-model="value1" multiple placeholder="添加问题" size="mini" style="height: 40px;line-height: 40px;margin-left: 8px;">
			    <el-option
			      v-for="(item,index) in options" :key="index"
			      :label="item.label"
			      :value="item.value"
			    >
			    </el-option>
			  </el-select>
			  <!-- subclick BTN -->
			  <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left: 8px;">搜索</el-button>
			  <!-- refeash -->
			  <el-button type="primary" icon="el-icon-refresh" size="mini" style="font-size: 18px;width: 28px;height: 28px;display: flex;justify-content: center;align-items: center;"></el-button>
		</div>
		<!-- table -->
		<StagTable></StagTable>
	</div>
</template>

<script>
	// selfs / js
	import Card from '../../external/Card.js'
	// selfs / sons
	import StagTable from '../../external/comment/StagTable.vue'
	export default {
		components:{
			StagTable
		},
		data() {
			return {
				// arr
				Card:[],
				options: [
					{ value: '选项1', label: '问题1' },
					{ value: '选项2', label: '问题2' },
					{ value: '选项3', label: '问题3' },
					{ value: '选项4', label: '问题4' },
				        ],
				value1: [],
				value2: [],
				// string
				input4:'Search',
				checked1:false,
				checked2:false
				}

		},
		mounted() {
			// 模拟信息
			this.Card = Card.map(function(v) {
				return v
			})
		},
		methods: {


		}
	}
</script>

<style lang="less" scoped>
	.stag{
		width: 100%;
		height: 100%;
		// background-color: #f5f5f5;
		.staging {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			// background-image: radial-gradient(circle at center, #409EFF, #d9d9d9);
			// z-index: 999;
			// padding: 0 20px;
			// line-height: 60px;
			// font-size: 18px;
			// color: #fff;
			// font-weight: bold;
			// //粘性定位 
			// position: sticky;
			// top: 0;
			// left: 0;
			// border-radius: 3px 3px 0 0;
		}
		.Card{
			width: 100%;
			height: 180px;
			li{
				float: left;
				list-style: none;
				padding: 12px;
				margin: 8px;
				border-radius: 10px;
				border: none;
				background-color: #fff;
				width: 140px;
				height: 120px;
				// vertical-align: middle;
				// line-height: 100px;
				.stagCard{
					display: flex;
					align-items: center;
					span{
						// margin-left: 8px;
						font-size: 12px;
					}
				}
			}
			// xuan ting
			li:hover{
				cursor: pointer;
				background-color: #3c96f0;
				opacity: .6;
				// border: 1px solid #409EFF;
				color: #fff;
			}
		}
		.check{
			height: 40px;
			// width: 60%;
			display: flex;
			justify-content: right;
			align-items: center;
			// 穿透
			/deep/.el-checkbox__label {
				font-size: 12px !important;
			}
			/deep/.el-input--mini .el-input__icon {
				font-size: 18px !important;
			    height: 32px !important;
				padding: 8px !important;
			}
			/deep/.el-input__suffix {
				margin: -4px;
			}
		}
	}


</style>